﻿<Page
    x:Class="Coding4Fun.Toolkit.Test.WinPhone81.Samples.Buttons.Tiles"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:coding4Fun="using:Coding4Fun.Toolkit.Controls"
    xmlns:c4fBinding="using:Coding4Fun.Toolkit.Controls.Binding"
    xmlns:local="using:Coding4Fun.Toolkit.Test.WinPhone81.Samples.Buttons"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Grid x:Name="LayoutRoot">

        <Grid.ChildrenTransitions>
            <TransitionCollection>
                <EntranceThemeTransition/>
            </TransitionCollection>
        </Grid.ChildrenTransitions>

        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!-- Title Panel -->
        <StackPanel Grid.Row="0" Margin="19,0,0,0">
            <TextBlock Text="{StaticResource AppName}" Style="{ThemeResource TitleTextBlockStyle}" Margin="0,12,0,0"/>
            <TextBlock Text="Tiles" Margin="0,0,0,26.5" Style="{ThemeResource HeaderTextBlockStyle}" CharacterSpacing="{ThemeResource PivotHeaderItemCharacterSpacing}"/>
        </StackPanel>

        <!--TODO: Content should be placed within the following grid-->
        <Grid Grid.Row="1" x:Name="ContentRoot" Margin="19,9.5,19,0">
            <ScrollViewer>
            <StackPanel>
                <StackPanel Orientation="Horizontal">
                    <coding4Fun:Tile 
                            Margin="0, 0, 12, 0"
                            Width="173"
                            Height="173"
                            Label="Click Me"
							Click="TileClick">
                        <Grid>
                            <Image 
                                    Source="../../Media/headWhite_100.png" 
                                    Stretch="None" />
                            <coding4Fun:TileNotification 
                                    Content="99" />
                        </Grid>
                    </coding4Fun:Tile>
                    <coding4Fun:Tile 
                            Margin="0, 0, 12, 0"
                            Width="173"
                            Height="173"
                            TextWrapping="Wrap"
                            Label="Testing Text Wrapping">
                        <Image 
                                Source="../../Media/head.png" 
                                Width="100"
                                Height="100"/>
                    </coding4Fun:Tile>
                    <coding4Fun:Tile 
						IsEnabled="False"
                        Width="72"
                        Height="72"
                        Label="disabled">
                    </coding4Fun:Tile>
                </StackPanel>
                <coding4Fun:Tile 
                        HorizontalAlignment="Left"
                        Margin="0, 12"
                        Width="358"
                        Height="173"
                        c4fBinding:FrameworkElementBinding.ClipToBounds="True"
                        Label="Coding4Fun Phone Toolkit">
                    <Grid>
                        <Canvas>
                            <Image 
					                x:Name="img" 
	        		                Source="../../Media/images/trex_360width.jpg" 
	        		                Stretch="None">
                                <Image.RenderTransform>
                                    <CompositeTransform />
                                </Image.RenderTransform>
                            </Image>
                        </Canvas>
                        <coding4Fun:TileNotification
                                Padding="18, 0"
                                Background="{StaticResource PhoneAccentBrush}">
                            rawr?
                        </coding4Fun:TileNotification>
                    </Grid>
                </coding4Fun:Tile>

                <coding4Fun:Tile 
                        Height="100"
                        Label="Coding4Fun Phone Toolkit">
                    <Grid>
                        <StackPanel 
                                Orientation="Horizontal" 
                                VerticalAlignment="Bottom"
                                HorizontalAlignment="Right"
                                Margin="12, 0">
                            <TextBlock VerticalAlignment="Bottom">
									<Run>Fri</Run>
									<Run 
										FontSize="54"
										FontWeight="Bold"
										FontFamily="{StaticResource PhoneFontFamilySemiBold}">
										15
									</Run>
                            </TextBlock>
                        </StackPanel>
                        <coding4Fun:TileNotification
                                Padding="0"
                                Background="Transparent"
                                HorizontalAlignment="Left"
								Margin="0">
                            <StackPanel Orientation="Horizontal">
                                <Image 
									
                                        Height="35"
                                        Stretch="Uniform"
                                        Source="../../Media/icons/appbar.share.rest.png" />
                                <TextBlock 
                                        VerticalAlignment="Center">
										Birthday
                                </TextBlock>
                            </StackPanel>
                        </coding4Fun:TileNotification>
                    </Grid>
                </coding4Fun:Tile>
                <coding4Fun:Tile 
                    Margin="0, 12"
                    Height="100"
                    Background="Orange"
                    c4fBinding:FrameworkElementBinding.ClipToBounds="True"
                    FontSize="28"
                    Foreground="{StaticResource PhoneChromeBrush}"
                    Label="Coding4Fun Phone Toolkit">
                    <Image 
                        HorizontalAlignment="Right"
                        Source="../../Media/headWhite.png" 
                        Stretch="Uniform" 
                        Height="150"
                        Width="150"
                        Margin="0, -25, -28, 0" />
                </coding4Fun:Tile>
            </StackPanel>
            </ScrollViewer>
        </Grid>
    </Grid>
</Page>
